<template>
    <div>
        <section>
            <!--数据字典类型查询工具条-->
            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="dictionaryTypeFilters">
                    <el-form-item>
                        <el-input v-model="dictionaryTypeFilters.keyword" placeholder="关键字"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="dictionaryTypeSearch">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleDictionaryTypeAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>

            <!--数据字典类型列表-->
            <el-table :data="dictionaryTypes" highlight-current-row v-loading="dictionaryTypeListLoading"
                      @selection-change="dictionaryTypeSelsChange"
                      @row-dblclick="showDrawer"
                      style="width: 100%;">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column type="index" label="序号" min-width="60">
                </el-table-column>
                <el-table-column prop="sn" label="编号" min-width="100" sortable>
                </el-table-column>
                <el-table-column prop="name" label="名称" min-width="180" sortable>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template scope="scope">
                        <el-button size="small" @click="handleDictionaryTypeEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="danger" size="small" @click="handleDictionaryTypeDel(scope.$index, scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--数据字典类型分页工具条-->
            <el-col :span="24" class="toolbar">
                <el-button type="danger" @click="batchDictionaryTypeRemove"
                           :disabled="this.dictionaryTypeSels.length===0">
                    批量删除
                </el-button>
                <el-pagination layout="prev, pager, next" @current-change="handleDictionaryTypeCurrentChange"
                               :page-size="dictionaryTypePageSize" :total="dictionaryTypeTotal"
                               :current-page="dictionaryTypeCurrentPage"
                               style="float:right;">
                </el-pagination>
            </el-col>

            <!--数据字典类型编辑界面-->
            <el-dialog :title="dictionaryDetailTitle" :visible.sync="dictionaryTypeFormVisible"
                       :close-on-click-modal="false" width="500px">
                <el-form :model="dictionaryTypeForm" label-width="80px" :rules="dictionaryTypeFormRules"
                         ref="dictionaryTypeFormRef">
                    <el-form-item prop="id" hidden>
                        <el-input v-model="dictionaryTypeForm.id" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="编号" prop="sn">
                        <el-input v-model="dictionaryTypeForm.sn" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="dictionaryTypeForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click.native="dictionaryTypeFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="dictionaryTypeEditSubmit"
                               :loading="dictionaryTypeEditLoading">
                        提交
                    </el-button>
                </div>
            </el-dialog>
        </section>

        <!--数据字典详情抽屉-->
        <section>
            <el-drawer
                    :title="dictionaryDetailDrawerTitle"
                    :visible.sync="dictionaryDetailVisible"
                    direction="rtl"
                    size="50%">

                <!--数据字典详情查询工具条-->
                <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
                    <el-form :inline="true" :model="dictionaryDetailFilters">
                        <el-form-item>
                            <el-input v-model="dictionaryDetailFilters.keyword" placeholder="关键字"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="dictionaryDetailSearch">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleDictionaryDetailAdd">新增</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>

                <!--数据字典详情列表-->
                <el-table :data="dictionaryDetails" highlight-current-row v-loading="dictionaryDetailListLoading"
                          @selection-change="dictionaryDetailSelsChange"
                          style="width: 100%;">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column type="index" label="序号" min-width="60">
                    </el-table-column>
                    <el-table-column prop="name" label="名称" min-width="180" sortable>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template scope="scope">
                            <el-button size="small" @click="handleDictionaryDetailEdit(scope.$index, scope.row)">编辑
                            </el-button>
                            <el-button type="danger" size="small"
                                       @click="handleDictionaryDetailDel(scope.$index, scope.row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!--数据字典详情分页工具条-->
                <el-col :span="24" class="toolbar">
                    <el-button type="danger" @click="batchDictionaryDetailRemove"
                               :disabled="this.dictionaryDetailSels.length===0">
                        批量删除
                    </el-button>
                    <el-pagination layout="prev, pager, next" @current-change="handleDictionaryDetailCurrentChange"
                                   :page-size="dictionaryDetailPageSize" :total="dictionaryDetailTotal"
                                   :current-page="dictionaryDetailCurrentPage"
                                   style="float:right;">
                    </el-pagination>
                </el-col>
            </el-drawer>

            <!--数据字典详情编辑界面-->
            <el-dialog :title="dictionaryDetailTitle" :visible.sync="dictionaryDetailFormVisible"
                       :close-on-click-modal="false"
                       width="500px">
                <el-form :model="dictionaryDetailForm" label-width="80px" :rules="dictionaryDetailFormRules"
                         ref="dictionaryDetailFormRef">
                    <el-form-item prop="id" hidden>
                        <el-input v-model="dictionaryDetailForm.id" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="dictionaryDetailForm.name" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click.native="dictionaryDetailFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="dictionaryDetailEditSubmit"
                               :loading="dictionaryDetailEditLoading">
                        确定
                    </el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>

<script>
    //import NProgress from 'nprogress'

    export default {
        data() {
            return {
                dictionaryTypeFilters: {
                    keyword: ''
                },
                dictionaryTypeTitle: "",
                dictionaryTypes: [],
                dictionaryTypeTotal: 0,
                dictionaryTypeCurrentPage: 1,
                dictionaryTypePageSize: 3,
                dictionaryTypeListLoading: false,
                dictionaryTypeSels: [],//列表选中行

                dictionaryTypeFormVisible: false,//编辑界面是否显示
                dictionaryTypeEditLoading: false,
                dictionaryTypeFormRules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ],
                    sn: [
                        {required: true, message: '请输入编号', trigger: 'blur'}
                    ]
                },
                //数据字典类型编辑界面数据
                dictionaryTypeForm: {
                    id: null,
                    sn: "",
                    name: ""
                },
                dictionaryDetailVisible: false,

                // 数据字典详情data
                dictionaryDetailFilters: {
                    keyword: ''
                },
                dictionaryDetailTitle: "",
                // 抽屉标题
                dictionaryDetailDrawerTitle: "",
                dictionaryDetails: [],
                dictionaryDetailTotal: 0,
                dictionaryDetailCurrentPage: 1,
                dictionaryDetailPageSize: 3,
                dictionaryDetailListLoading: false,
                dictionaryDetailSels: [],//列表选中行
                dictionaryDetailTypeId: null,

                dictionaryDetailFormVisible: false,//编辑界面是否显示
                dictionaryDetailEditLoading: false,
                dictionaryDetailFormRules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'}
                    ]
                },
                //数据字典类型编辑界面数据
                dictionaryDetailForm: {
                    id: null,
                    name: ""
                }

            }
        },
        methods: {

            handleDictionaryTypeCurrentChange(val) {
                this.dictionaryTypeCurrentPage = val;
                this.getDictionaryTypes();
            },
            // 高级查询
            dictionaryTypeSearch() {
                this.dictionaryTypeCurrentPage = 1;
                this.getDictionaryTypes();
            },
            //获取数据字典类型列表
            getDictionaryTypes() {
                let para = {
                    "currentPage": this.dictionaryTypeCurrentPage,
                    "pageSize": this.dictionaryTypePageSize,
                    "keyword": this.dictionaryTypeFilters.keyword
                }
                this.dictionaryTypeListLoading = true;
                //NProgress.start();
                this.$http.post("/dictionaryType/listByPage", para)
                    .then((res) => {
                        res = res.data;
                        this.dictionaryTypeTotal = res.data.total;
                        this.dictionaryTypes = res.data.list;
                        this.dictionaryTypeListLoading = false;
                        console.log("total: " + this.dictionaryTypeTotal);
                        //NProgress.done();
                    })
                    .catch(error => {
                        console.log(error);
                        alert("系统错误！")
                    });
            },
            //删除一条数据字典类型
            handleDictionaryTypeDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.dictionaryTypeListLoading = true;
                    //NProgress.start();
                    this.$http.delete("/dictionaryType/" + row.id).then((res) => {
                        this.dictionaryTypeListLoading = false;
                        res = res.data;
                        //NProgress.done();

                        this.$message({
                            message: res.message,
                            type: res.success ? 'success' : 'error'
                        });
                        this.dictionaryTypeCurrentPage = 1;
                        this.getDictionaryTypes();
                    }).catch(() => {
                        this.$message({
                            message: '系统错误',
                            type: 'error'
                        });
                    });
                }).catch(reason => {

                });
            },
            //显示编辑界面
            handleDictionaryTypeEdit: function (index, row) {
                this.dictionaryTypeTitle = "编辑";
                this.dictionaryTypeFormVisible = true;
                // 克隆当前行的数据用来回显
                this.dictionaryTypeForm = Object.assign({}, row);
                console.log("row: ");
                console.log(row);
                console.log("dictionaryTypeForm: ");
                console.log(this.dictionaryTypeForm);
            },
            //显示数据字典类型新增界面
            handleDictionaryTypeAdd: function () {
                this.dictionaryTypeTitle = "新增";
                this.dictionaryTypeFormVisible = true;
                this.dictionaryTypeForm = {};
            },
            // 数据字典类型编辑确认提交
            dictionaryTypeEditSubmit: function () {
                this.$refs.dictionaryTypeFormRef.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.dictionaryTypeEditLoading = true;
                            //NProgress.start();
                            // 克隆一份表达数据，避免影响网页表格里的数据
                            let para = Object.assign({}, this.dictionaryTypeForm);
                            console.log("即将执行 PUT /dictionaryType");
                            this.$http.put("/dictionaryType", para)
                                .then((res) => {
                                    console.log("PUT /dictionaryType 已发送")
                                    this.dictionaryTypeEditLoading = false;
                                    res = res.data;
                                    //NProgress.done();
                                    this.$message({
                                        message: res.message,
                                        type: res.success ? 'success' : 'error'
                                    });
                                    this.$refs['dictionaryTypeFormRef'].resetFields();
                                    this.dictionaryTypeFormVisible = false;
                                    this.getDictionaryTypes();
                                })
                                .catch(error => {
                                    this.editLoading = false;
                                    this.$message({
                                        message: '系统错误',
                                        type: 'error'
                                    });
                                });
                        }).catch(reason => {

                        });
                    }
                });
            },
            // 数据字典类型多选框变化回调
            dictionaryTypeSelsChange: function (sels) {
                this.dictionaryTypeSels = sels;
            },
            // 数据字典类型批量删除
            batchDictionaryTypeRemove: function () {
                let ids = this.dictionaryTypeSels.map(item => item.id);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.dictionaryTypeListLoading = true;
                    //NProgress.start();

                    this.$http.patch("/dictionaryType", ids)
                        .then((res) => {
                            res = res.data;
                            this.dictionaryTypeListLoading = false;
                            //NProgress.done();

                            this.$message({
                                message: res.message,
                                type: res.success ? 'success' : 'error'
                            });
                            this.dictionaryTypeCurrentPage = 1;
                            this.getDictionaryTypes();
                        }).catch(() => {
                        this.$message({
                            message: '系统错误',
                            type: 'error'
                        });
                    });
                }).catch(reason => {

                });
            },
            // 显示数据字典详情抽屉
            showDrawer(row, column, event) {
                this.dictionaryDetailVisible = true;
                this.dictionaryDetailTypeId = row.id;
                this.dictionaryDetailDrawerTitle = "数据字典明细--" + row.name;
                this.dictionaryDetailFilters.keyword = "";
                this.dictionaryDetailCurrentPage = 1;
                this.getDictionaryDetails();
            },


            // 数据字典详情方法
            handleDictionaryDetailCurrentChange(val) {
                this.dictionaryDetailCurrentPage = val;
                this.getDictionaryDetails();
            },
            // 高级查询
            dictionaryDetailSearch() {
                this.dictionaryDetailCurrentPage = 1;
                this.getDictionaryDetails();
            },
            //获取数据字典详情列表
            getDictionaryDetails() {
                let para = {
                    "currentPage": this.dictionaryDetailCurrentPage,
                    "pageSize": this.dictionaryDetailPageSize,
                    "keyword": this.dictionaryDetailFilters.keyword,
                    "typeId": this.dictionaryDetailTypeId
                }
                this.dictionaryDetailListLoading = true;
                //NProgress.start();
                this.$http.post("/dictionaryDetail/listByPage", para)
                    .then((res) => {
                        res = res.data;
                        this.dictionaryDetailTotal = res.data.total;
                        this.dictionaryDetails = res.data.list;
                        this.dictionaryDetailListLoading = false;
                        console.log("total: " + this.dictionaryDetailTotal);
                        //NProgress.done();
                    })
                    .catch(error => {
                        console.log(error);
                        alert("系统错误！")
                    });
            },
            //删除一条数据字典详情
            handleDictionaryDetailDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.dictionaryDetailListLoading = true;
                    //NProgress.start();
                    this.$http.delete("/dictionaryDetail/" + row.id).then((res) => {
                        this.dictionaryDetailListLoading = false;
                        res = res.data;
                        //NProgress.done();

                        this.$message({
                            message: res.message,
                            type: res.success ? 'success' : 'error'
                        });
                        this.dictionaryDetailCurrentPage = 1;
                        this.getDictionaryDetails();
                    }).catch(() => {
                        this.$message({
                            message: '系统错误',
                            type: 'error'
                        });
                    });
                }).catch(reason => {

                });
            },
            //显示编辑界面
            handleDictionaryDetailEdit: function (index, row) {
                this.dictionaryDetailTitle = "编辑";
                this.dictionaryDetailFormVisible = true;
                // 克隆当前行的数据用来回显
                this.dictionaryDetailForm = Object.assign({}, row);
                console.log("row: ");
                console.log(row);
                console.log("dictionaryDetailForm: ");
                console.log(this.dictionaryDetailForm);
            },
            //显示数据字典详情新增界面
            handleDictionaryDetailAdd: function () {
                this.dictionaryDetailTitle = "新增";
                this.dictionaryDetailFormVisible = true;
                this.dictionaryDetailForm = {};
            },
            // 数据字典详情编辑确认提交
            dictionaryDetailEditSubmit: function () {
                this.$refs.dictionaryDetailFormRef.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.dictionaryDetailEditLoading = true;
                            //NProgress.start();
                            // 克隆一份表达数据，避免影响网页表格里的数据
                            let para = Object.assign({}, this.dictionaryDetailForm);
                            para.typeId = this.dictionaryDetailTypeId;
                            console.log("dictionaryDetailForm: ");
                            console.log(this.dictionaryDetailForm);
                            console.log("即将执行 PUT /dictionaryDetail");
                            this.$http.put("/dictionaryDetail", para)
                                .then((res) => {
                                    console.log("PUT /dictionaryDetail 已发送")
                                    this.dictionaryDetailEditLoading = false;
                                    res = res.data;
                                    //NProgress.done();
                                    this.$message({
                                        message: res.message,
                                        type: res.success ? 'success' : 'error'
                                    });
                                    this.$refs['dictionaryDetailFormRef'].resetFields();
                                    this.dictionaryDetailFormVisible = false;
                                    this.getDictionaryDetails();
                                })
                                .catch(error => {
                                    this.editLoading = false;
                                    this.$message({
                                        message: '系统错误',
                                        type: 'error'
                                    });
                                });
                        }).catch(reason => {

                        });
                    }
                });
            },
            // 数据字典详情多选框变化回调
            dictionaryDetailSelsChange: function (sels) {
                this.dictionaryDetailSels = sels;
            },
            // 数据字典详情批量删除
            batchDictionaryDetailRemove: function () {
                let ids = this.dictionaryDetailSels.map(item => item.id);
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.dictionaryDetailListLoading = true;
                    //NProgress.start();

                    this.$http.patch("/dictionaryDetail", ids)
                        .then((res) => {
                            res = res.data;
                            this.dictionaryDetailListLoading = false;
                            //NProgress.done();

                            this.$message({
                                message: res.message,
                                type: res.success ? 'success' : 'error'
                            });
                            this.dictionaryDetailCurrentPage = 1;
                            this.getDictionaryDetails();
                        }).catch(() => {
                        this.$message({
                            message: '系统错误',
                            type: 'error'
                        });
                    });
                }).catch(reason => {

                });
            },

        },
        // 页面加载完成回调
        mounted() {
            this.getDictionaryTypes();
        }
    }

</script>

<style scoped>

</style>